<template>
  <el-container>
    <el-main>
      <div class="app-main" style="width: 1000px">
        <el-form
          label-width="50%"
          style="width: 50%; margin-left: 30px"
          label-position="top"
        >
          <el-form-item label="名称:">
            <el-input v-model="tagLabel.tagName"></el-input>
          </el-form-item>
          <el-form-item label="描述:">
            <el-input v-model="tagLabel.tagText"></el-input>
          </el-form-item>
          <el-form-item label="Background Color:">
            <el-input
              placeholder="请输入内容"
              v-model="tagLabel.tagColor"
              class="input-with-picker"
            >
              <template slot="prepend"
                ><el-color-picker
                  v-model="tagLabel.tagColor"
                  show-alpha
                  :predefine="predefineColors"
                >
                </el-color-picker
              ></template>
            </el-input>
          </el-form-item>
          <el-form-item label="Background Color:" v-show="false">
            <div id="coldiv">
              <el-row>
                <el-col :span="2">
                  <div
                    class="grid-content bg-purple-dark"
                    :style="{
                      background: '' + tagC + '',
                      color: '' + tagC + '',
                    }"
                  >
                    1
                  </div>
                </el-col>
                <el-col :span="22">
                  <div id="dialog-input-text1" class="dialog-input-text1">
                    <el-input
                      class="dialog-input-text"
                      v-model="tagC"
                    ></el-input>
                  </div>
                </el-col>
              </el-row>
            </div>

            <el-tag
              v-for="tag in tagColors"
              :key="tag.label"
              :color="tag.tagColor"
              @click="tagC = tag.tagColor"
            >
            </el-tag>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import tagColors from "./tagColors.json";

export default {
  name: "ComplexTable",
  data() {
    return {
      tagLabel: {
        tagName: "",
        tagText: "",
        tagColor: "rgba(255, 215, 0, 1)",
      },
      tagColors: tagColors,
      tagC: "white",
      color: "rgba(255, 215, 0, 1)",
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.el-main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  margin-bottom: 16px;
  width: 100%;
  padding: 10px;
  background-color: #fafafa;
  border-top: 1px solid #dbdbdb;
}
span {
  margin-right: 20px;
}
#coldiv {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}
#coldiv ::v-deep .el-input__inner {
  border: 0px;
}

.input-with-picker ::v-deep .el-input__inner {
  border-left-width: 0px;
}

.input-with-picker ::v-deep .el-input__inner:focus,
.input-with-picker ::v-deep .el-color-picker__color {
  border-color: #dcdfe6;
}
.input-with-picker ::v-deep .el-input-group__prepend {
  background-color: #fff;
  padding: 0px;
  border: 0px;
}
.input-with-picker ::v-deep .el-color-picker__trigger {
  padding: 0px;
  border-radius: 0px;
  border: 0px;
}
.input-with-picker ::v-deep .el-color-picker__color {
  border: 1px solid #dcdfe6;
  border-radius: 1px 0px 0px 1px;
  border-right-width: 0px;
}
</style>
